/** @jsxImportSource @emotion/react */
import * as React from "react";
import {RepLink, ReportViewProps,} from "../../common/base";
import {末尾链接, } from "../../common/rarelyVary";
import {
    CCell, Cell, RCell, Table, TableBody, TableRow, Text, useTheme
} from "customize-easy-ui-component";
import {ReportFirstPageHeadCyMa} from "../../valve/rarelyVary";
import {config设备概况, } from "./Regular.O-1";
import {JobResponsibiliVw} from "./JobResponsibili";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
    const [firstNode,]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[5],});
  return (
    <React.Fragment>
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
            {'符合' === orc?.检验结论 && <CertificatePage orc={orc} rep={rep}/>}

            <div css={{"@media print": {pageBreakInside: 'avoid'}}}>
                <Text variant="h6"
                      css={{fontSize: '0.8rem', textAlign: 'end', marginBottom: 0}}> FJJ/DA-1041-2-2020 </Text>
                <Text id='Survey' variant="h2" css={{textAlign: 'center',
                }}>聚乙烯管制造监督检验项目表</Text>
                <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
                }}>监检编号：{rep.isp?.no}</Text>
                <Table id='Survey' fixed={ ["13.3%", "%","7%", "9%", "15%","19%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
                    <TableBody>
                        <RepLink rep={rep} tag={'Survey'}>
                            {firstNode}
                        </RepLink>
                    </TableBody>
                </Table>
                <Table  fixed={  ["13.3%","25%", "2%", "34%", "9%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
                    <TableBody>
                        <RepLink rep={rep} tag={'Conclusion'}>
                            <TableRow>
                                <CCell>产品批号/数量</CCell><CCell>{orc?.产批号??'／'}</CCell>
                                <CCell>/</CCell><CCell>{orc?.产数量??'／'}</CCell>
                                <CCell>制造日期</CCell><CCell>{orc?.制造日??'／'}</CCell>
                            </TableRow>
                        </RepLink>
                    </TableBody>
                </Table>
            </div>
            <JobResponsibiliVw orc={orc} rep={rep}/>
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}

export const CertificatePage = ({orc, rep, children}: { orc: any, rep: any, children?: React.ReactNode }
) => {
    const theme = useTheme();
    const [firstNode,]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[5],});
    const callback = () => {
        return <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
            <ReportFirstPageHeadCyMa  mbbm='FJB/DA-1041-2020'  rep={rep} theme={theme} nMa nFBp />
            <div css={{
                "@media print": {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-around',
                    height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
                }
            }}>
                <Text variant="h3" css={{textAlign: 'center', "@media print": {fontSize: theme.fontSizes[5],},}}>
                    特种设备监督检验证书
                </Text>
                <Text variant="h5" css={{textAlign: 'center'}}>（压力管道元件制造）</Text>
                <div css={ {"@media print": {height:'73vh',} } }>
                    <div css={{display: 'flex',justifyContent: 'space-between',}}>
                        &nbsp;
                        <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
                        }}>证书编号：{rep.isp?.no}</Text>
                    </div>
                    <Table fixed={ ["13.3%", "%","7%", "9%", "15%","19%"] }
                                    css={ {borderCollapse: 'collapse',"@media print": {minHeight:'21vh',}} } tight  miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag={'Survey'}>
                                {firstNode}
                            </RepLink>
                        </TableBody>
                    </Table>
                    <Table fixed={ ["13.3%","25%", "2%", "34%", "9%", "%"] }
                                              css={ {borderCollapse: 'collapse',} } tight  miniw={800}>
                        <TableBody>
                            <RepLink rep={rep} tag={'Conclusion'}>
                                <TableRow css={ {"@media print": {height:'3rem'}} }>
                                    <CCell>产品批号/数量</CCell><CCell>{orc?.产批号??'／'}</CCell>
                                    <CCell>/</CCell><CCell>{orc?.产数量??'／'}</CCell>
                                    <CCell>制造日期</CCell><CCell>{orc?.制造日??'／'}</CCell>
                                </TableRow>
                            </RepLink>
                            <RepLink rep={rep} tag='Conclusion'>
                                <TableRow>
                                <CCell colSpan={6}>
                                        <Table  fixed={ ["24%", "39%", "6%", "%"] }
                                                css={ {borderCollapse: 'collapse', "@media print": {height:'fill-available'},} }  tight  miniw={800}>
                                            <TableBody>
                                                {orc?.检验结论==='符合' && <TableRow>
                                                        <Cell css={{border:'none',textIndent:'2rem',}} colSpan={4}>
                                                            <Text css={{minHeight:'12rem',display:'flex',lineHeight: 1.9,margin: '1rem'}}>
                                                                按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该台（批）产品经本机构实施监督检验，
                                                                安全性能符合《压力管道监督检验规则》（TSG D7006-2020） 的要求，特发此证书。
                                                            </Text>
                                                        </Cell>
                                                    </TableRow>
                                                }
                                                <TableRow css={{"@media print": {height:'3rem'} }}>
                                                    <RCell css={{border:'none'}}>监督检验人员：</RCell>
                                                    <Cell css={{border:'none'}}>机erter</Cell>
                                                    <RCell css={{border:'none'}}>日期：</RCell>
                                                    <Cell css={{border:'none'}}></Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height:'3rem'} }}>
                                                    <RCell css={{border:'none'}}>审   核：</RCell>
                                                    <Cell css={{border:'none'}}></Cell>
                                                    <RCell css={{border:'none'}}>日期：</RCell>
                                                    <Cell css={{border:'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height:'3rem'} }}>
                                                    <RCell css={{border:'none'}}>批   准：</RCell>
                                                    <Cell css={{border:'none'}}></Cell>
                                                    <RCell css={{border:'none'}}>日期：</RCell>
                                                    <Cell css={{border:'none'}}>2024-04-10</Cell>
                                                </TableRow>
                                                <TableRow>
                                                    <RCell css={{border:'none'}}>监检机构：</RCell>
                                                    <Cell colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.name}</Cell>
                                                    <CCell css={{border:'none'}}>（监督检验机构检验专用章）</CCell>
                                                </TableRow>
                                                <TableRow css={{"@media print": {height:'fill-available'} }}>
                                                    <RCell  css={{border:'none'}}>监督检验机构核准证号：</RCell>
                                                    <Cell  colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                                                    <CCell css={{border:'none'}}>2024-04-10</CCell>
                                                </TableRow>
                                            </TableBody>
                                        </Table>
                                    </CCell>
                                </TableRow>
                            </RepLink>
                        </TableBody>
                    </Table>
                </div>
                <Text css={{fontSize:'0.8rem'}}>注：本证书一式三份，一份监督检验机构存档，两份送制造单位，其中一份由制造单位随产品出厂资料交付。
                </Text>
            </div>
        </div>
    }
    return <>
        <div id="Certificate"/>
        {callback()}
    </>;
};
